<template>
  <div id="page_dao">
    <div id="dao">
      <div id="dao_Tit">
        <span class="tit"><i class="el-icon-edit-outline"/>配置dao
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
          >
            <vue-editor
              v-model="helpArrays.CONFIG_DAO"
              :disabled="true"
              :editor-toolbar="customToolbar"
            />
            <i slot="reference" class="el-icon-question" style="color:#409eff;margin-left:5px;font-size:20px;"/>
          </el-popover>
        </span>
      </div>
      <el-form
        ref="form"
        :model="form"
        label-width="180px"
      >
        <el-form-item
          ref="dao"
          label="dao包名称"
        >
          <el-input v-model="list.daoPackage"/>
          <span
            v-show="tit.dao"
            class="errortitle"
          >dao包名称不能为空</span>
        </el-form-item>
        <el-form-item label="dao前缀">
          <el-input v-model="list.daoPrefix"/>
        </el-form-item>
        <el-form-item label="dao后缀">
          <el-input v-model="list.daoSuffix"/>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button
          class="next"
          @click="onSubmit"
        >下一步</el-button>
        <el-button
          class="back"
          @click="onBack"
        >取消</el-button>
      </div>
    </div>
  </div>
</template>
<style>
#page_dao #dao #dao_Tit .tit i {
  margin-right: 10px;
}
#page_dao #dao {
  margin-left: 15px;
  margin-top: 15px;
  width: 100%;
  border: 1px solid #623f18;
}
#page_dao #dao #dao_Tit {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #623f18;
}
#page_dao #dao #dao_Tit .tit {
  margin-left: 20px;
  font-size: 20px;
  color: #623f18;
  line-height: 40px;
  float:left;
}
#page_dao #dao .btn {
  text-align: center;
  border-top: 1px solid #e5e5e5;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #f5f5f5;
}
#page_dao #dao .btn .el-button {
  margin-right: 30px;
}
#page_dao .el-form {
  margin: 90px 150px;
}
#page_dao .el-input {
  width: 350px;
}
#page_dao .el-input__suffix {
  top: 1px;
}
#page_dao .el-form-item__content {
  width: 100%;
}
#page_dao .errortitle {
  color: red;
}
#page_dao .next {
  background: #623f18;
  color: #fff;
}
#page_dao .back {
  border-color: #623f18;
  color: #623f18;
}
</style>
<script>
import { gconfigDaoSave, gconfigDao, docwindow } from '@/api/page'
import { VueEditor } from 'vue2-editor'

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      arr: [],
      customToolbar: [],
      helpArrays: [],
      tit: { dao: false },
      list: [],
      save: {
        id: '',
        pid: '',
        daoPackage: '',
        daoPrefix: '',
        daoSuffix: ''
      },
      data: {
        pid: ''
      },
      form: {}
    }
  },
  mounted() {
    this.data.pid = localStorage.getItem('pid')
    localStorage.setItem('pid', '')
    gconfigDao(this.data)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.list = response.data.data
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error.response.data.message)
        this.$router.push('/admin')
      })

    this.arr = ['CONFIG_DAO']

    docwindow(this.arr)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.helpArrays = response.data.data
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error.response.data.message)
      })
  },
  methods: {
    onSubmit() {
      this.save.id = ''
      this.save.pid = this.data.pid
      this.save.daoPackage = this.list.daoPackage || ''
      this.save.daoPrefix = this.list.daoPrefix || ''
      this.save.daoSuffix = this.list.daoSuffix || ''

      if (this.save.daoPackage == '') {
        this.$refs.dao.$el.childNodes[0].style.color = 'red'
        this.$refs.dao.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.dao = true
      } else {
        this.$refs.dao.$el.childNodes[0].style.color = '#606266'
        this.$refs.dao.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.dao = false
      }

      if (!this.tit.dao) {
        gconfigDaoSave(this.save)
          .then(response => {
            if (response.data.code == 'SUCCESS') {
              this.openFullScreen()
              setTimeout(() => {
                this.loading.close()
                this.$router.push('/admin/pageService')
                localStorage.setItem('pid', this.data.pid)
              }, 1000)
            } else {
              alert(response.data.message)
            }
          })
          .catch(error => {
            alert(error.response.data.message)
          })
      }
    },
    onBack() {
      this.$router.go(-1)
      localStorage.setItem('pid', this.data.pid)
    },
    openFullScreen() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
  }
}
</script>
